<!-- 护理项目新增编辑弹窗 -->
<template>
  <div class="dialog-form">
    <t-dialog
      v-model:visible="formVisible"
      :header="title + '护理项目'"
      :footer="false"
      :on-close="onClickCloseBtn">
      <template #body>
        <!-- 表单内容 -->
        <div class="dialogCenter">
          <div class="dialogOverflow">
            <t-form
              :data="formData"
              ref="form"
              :rules="rules"
              :label-width="110"
              @reset="onClickCloseBtn"
              @submit="onSubmit"
            >
              <t-form-item label="护理项目名称：" name="name">
                <t-input
                  v-model="formData.name"
                  class="wt-400"
                  placeholder="请输入"
                  clearable
                  show-limit-number
                  :maxlength="10"
                >
                </t-input>
              </t-form-item>
              <t-form-item label="价格：" name="price">
                <t-input-number
                  v-model="formData.price"
                  :min="0"
                  :step="10"
                  placeholder="0.00"
                  :decimal-places="2"
                  @blur="textBlurPrice"
                  @change="textBlurPrice"
                ></t-input-number>
              </t-form-item>
              <t-form-item label="单位：" name="unit">
                <t-input
                  v-model="formData.unit"
                  class="wt-400"
                  placeholder="请输入"
                  clearable
                  show-limit-number
                  :maxlength="5"
                >
                </t-input>
              </t-form-item>
              <t-form-item label="排序：" name="orderNo">
                <t-input-number
                  v-model="formData.orderNo"
                  :min="minNumber"
                  @blur="textBlurNo"
                  @change="textBlurNo"
                ></t-input-number>
              </t-form-item>
              <t-form-item label="状态：" name="status">
                <t-radio-group v-model="formData.status">
                  <t-radio
                    v-for="(item, index) in statusData"
                    :key="index"
                    :value="item.id">{{ item.value }}</t-radio>
                </t-radio-group>
              </t-form-item>
              <t-form-item label="护理图片：" name="image">
                <t-upload
                  v-model="photoFile"
                  action="api/common/upload"
                  autoUpload="true"
                  theme="image"
                  :size-limit="sizeLimit"
                  tips="图片大小不超过2M,仅支持上传PNG JPG JPEG类型图片"
                  accept="image/*"
                  :before-upload="beforeUpload"
                  @remove="remove"
                  @fail="handleFail"
                  @success="handleSuccess"
                ></t-upload>
              </t-form-item>
              <t-form-item label="护理项目描述：" name="nursingRequirement"
                ><t-textarea
                  v-model="formData.nursingRequirement"
                  class="wt-400"
                  placeholder="请输入"
                  show-limit-number
                  :maxlength="50"
                >
                </t-textarea>
              </t-form-item>
              <t-form-item class="dialog-footer">
                <div>
                  <button class="bt bt-grey wt-60" type="reset">取消</button>
                  <button theme="primary" type="submit" class="bt wt-60">
                    <span>确定</span>
                  </button>
                </div>
              </t-form-item>
            </t-form>
          </div>
        </div>
      </template>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { MessagePlugin, ValidateResultContext } from 'tdesign-vue-next'
//声明父组件传递过来的属性
const props = defineProps({
  // 控制dialog是否显示与隐藏
  visible:{
      type: Boolean,
      default:()=>{
          return false;
      }
  },
  title: {
      type: String,
      default:()=>{
          return '';
      }
  },
  data:{
      type: Object,
      default:()=>{
          return {
              name:'',
              price:'',
              unit:'',
              orderNo:'',
              status:'',
              image:'',
              nursingRequirement:''
          };
      }
  }
})

//声明父组件传递过来的方法
const emit = defineEmits(['dialogClose', 'dialogSave'])

//定义子组件自己的数据
const formVisible = ref(false)
const formData = ref({
  name:'',
  price:'',
  unit:'',
  orderNo:'',
  status:'',
  image:'',
  nursingRequirement:''
})

// 需要把父组件传来的数据 赋值给 子组件的数据
watch(()=>props.visible, (newValue)=>{
formVisible.value = newValue;
})
// 需要把父组件传来的数据 赋值给 子组件的数据
watch(()=>props.data, (newValue, oldValue)=>{
  formData.value = newValue;
  if(newValue.image){
      photoFile.value[0] = {url: newValue.image};
  }
});

//表单参数校验
const form = ref();
// 表单校验
const rules = {
  name: [
    // 名称校验
    {
      required: true,
      message: '护理项目名称为空，请输入护理项目名称',
      type: 'error',
      trigger: 'blur'
    }
  ],
  // 费用校验
  price: [
    {
      required: true,
      message: '价格为空，请输入价格',
      type: 'error',
      trigger: 'blur'
    },
    {
      validator: (val) => val >= 0.01,
      message: '价格为空，请输入价格',
      type: 'error',
      trigger: 'change'
    }
  ],
  // 单位
  unit: [
    {
      required: true,
      message: '单位为空，请输入单位',
      type: 'error',
      trigger: 'blur'
    }
  ],
  // 排序
  orderNo: [
    {
      required: true,
      message: '排序为空，请输入排序',
      type: 'error',
      trigger: 'blur'
    },
    {
      validator: (val) => val >= 1,
      message: '排序为空，请输入排序',
      type: 'error',
      trigger: 'change'
    }
  ],
  //   状态
  status: [
    {
      required: true,
      message: '状态为空，请选择状态',
      type: 'error',
      trigger: 'change'
    }
  ],
  // 护理图片
  image: [
    {
      required: true,
      message: '护理图片为空，请上传护理图片',
      type: 'error',
      trigger: 'change'
    }
  ],
  //   项目描述
  nursingRequirement: [
    {
      required: true,
      message: '护理项目描述为空，请输入护理项目描述',
      type: 'error',
      trigger: 'blur'
    }
  ]
}
// 文件上传
const photoFile = ref([])
const sizeLimit = ref({
  size: 2,
  unit: 'MB',
  message: '图片大小超过2m，请重新上传'
}) // 图片的大小限制
const beforeUpload = ()=>{

}
// 移除图片时将图片设置为默认图片
const remove = () => {
  photoFile.value = []
  formData.value.image = ''
}
// 上传图片失败
const handleFail = ({ file }) => {
  MessagePlugin.error(`图片 ${file.name} 上传失败`)
}
// 上传成功后触发。
const handleSuccess = (params) => {
  const url = params.response.data
  formData.value.image = url
  photoFile.value[0].url = url
}
// 
const statusData = ref([
  {id:1, value:'启用'},{id:0, value:'禁用'},
])
const minNumber = ref(1)
//排序输入框回调，对排序的格式做校验
const textBlurNo = ()=>{
  let orderNo =  formData.value.orderNo
  if(orderNo && Number(orderNo) < 1){
      formData.value.orderNo = '1'
  }
}
//价格输入框回调，对价格的格式做校验
const textBlurPrice = ()=>{
  let price =  formData.value.price
  if(price && Number(price) < 0){
      formData.value.price = '0.00';
  }
}
// 当点击了取消按钮触发
const onClickCloseBtn = ()=>{
  // 清空图片
  remove();
  // 清空表单的检验信息
  form.value.reset();
  emit('dialogClose')
}
// 表单提交触发
const onSubmit =(result) => {
  if (result.validateResult === true) {
     // 说明校验通过
      emit('dialogSave', formData.value);
  }
}

// const handleClear=()=>{
//     // 清空图片
//     remove();
//     // 清空表单
//     form.value.reset();
//     // 清空表单的校验信息
//     form.value.clearValidate();
// }

// // 向父组件暴露数据与方法
// defineExpose({
//     handleClear
// })

</script>